@import url("https://rsms.me/inter/inter.css");

hr.solid {
    border: 1px solid #deddda;
}

div[name='logo'] {
    filter: drop-shadow(rgb(122, 122, 122) 0rem 0.5rem 8px);
}

body {
    font-family: 'Inter';
    background-color: #f6f5f4;
}

h1 {
    font-family: 'Inter', bold;
    font-size: 500%;
    color: #1c71d8;
    line-height: 0;
}

h2 {
    font-family: 'Inter';
    font-size: 175%;
    color: #241f31;
    line-height: 0;
}

h3 {
    font-family: 'Inter';
    font-size: 120%;
    color: #777188;
    width: 65%;
    line-height: 15px;
}

h4 {
    font-family: 'Inter';
    font-size: 75%;
    color: #241f31;
    width: 65%;
}

p {
    font-family: 'Inter';
    font-size: 150%;
    color: #241f31;
    width: 65%;
}

.pill-button {
    border: none;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 100px;
    font-family: 'Inter';
    font-weight: bold;
    font-size: 110%;
    filter: drop-shadow(rgba(0, 0, 0, 0.5) 0rem 0rem 8px);
    transition: all 0.25s;
    transition-timing-function: ease-out;
    display: inline-block;
}

.pill-button-linux {
    overflow: hidden;
}

.button-label {
    display: block;
}

.pill-button-blue {
    background-color: #3584e4;
    color: white;
}

.pill-button-gray {
    background-color: #5e5c64;
    color: white;
}

.pill-button-ltblue {
    background-color: #bed5f1;
    color: #1b1b1b;
}

.pill-button:hover {
    transform: scale(105%);
}

.pill-button:active {
    transform: scale(90%);
}

.pill-button-blue:hover {
    background-color: #62a0ea;
}

.pill-button-gray:hover {
    background-color: #77767b;
}

.pill-button-ltblue:hover {
    background-color: #F6F5F4;
}

.button-icon {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

.footer-icon {
    width: 25px;
    height: 25px;
    vertical-align: middle;
    filter: brightness(10%);
}

.linux-instructions {
    overflow: hidden;
    border-radius: 15px;
    background: #EBEBEB;
    padding: 20px;
    filter: drop-shadow(rgba(0, 0, 0, 0.5) 0rem 0.3rem 8px);
    width: 65%;
    transition: transform 0.25s ease-in-out, padding 0.25s ease-in-out, max-height 0.25s ease-in-out;
    transform: scaleY(1);
    transform-origin: top;
    display: block;
    max-height: 1000px;
}

.linux-instructions.hidden {
    transform: scaleY(0);
    display: hidden;
    max-height: 0px;
    padding: 0px;
}

.screenshot {
    width: 100%;
    height: auto;
}

@media (prefers-color-scheme: dark) {
    div[name='logo'] {
        filter: drop-shadow(rgb(39, 39, 39) 0rem 0rem 0px);
    }

    body {
        background-color: #1e1e22;
        color: #f6f5f4
    }

    .footer-icon {
        filter: brightness(100%);
    }    

    h1 {
        color: #62a0ea;
    }

    h2, h4, p {
        color: #f6f5f4;
    }

    h3 {
        color: #858585;
    }

    hr.solid {
        border: 1px solid #3d3846;
    }

    .linux-instructions {
        background: #3d3846;
    }
}